<template>
    <div>
        <div class="my-box">
        <div class="my-top" :style='"background-image: url("+lists.backgroundUrl+")"'>
            <div class="header-icon">
                <span class="icon iconfont icon-arrow-left-bold" @click.stop="$router.go(-1)"></span>
                <span class="words" @click="logout">退出登陆</span>
            </div>
            <div class="user-img">
                <img :src="lists.avatarUrl" alt="">
            </div>
            <div class="name">
               <span>{{lists.nickname}}</span> 
               <span class="iconfont icon-nan nan"></span>
               <span class="iconfont icon-nv nv"></span>
            </div>
            <div class="PersonalSignature">{{lists.signature}}</div>
            <div class="user-data" @click="gotomessage()">个人资料</div>
            <div class="bottom">
                <ul>
                    <li>
                        <div class="num">{{lists.playlistCount}}</div>
                        <div class="words">好友</div>
                    </li>
                    <li>
                        <div class="num">{{lists.follows}}</div>
                        <div class="words">关注</div>
                    </li>
                    <li>
                        <div class="num">{{lists.followeds}}</div>
                        <div class="words">粉丝</div>
                    </li>
                    <li>
                        <div class="num">{{lists.followeds}}</div>
                        <div class="words">访客</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="my-bottom">
            <div class="top">
                <ul>
                    <li>
                       <a href="" class="active">歌单</a> 
                    </li>
                    <li>
                        <a href="">作品</a>
                    </li>
                </ul>
            </div>
            <div class="bottom">
                <ul>
                    <li v-for="(item,index) in UserPlaylist" :key="index" @click.stop="gotorankinglist(item.id)">
                        <div class="img"><img :src="item.coverImgUrl" alt=""></div>
                        <div class="word">
                            <div class="name">{{item.name}}</div>
                            <div class="num">{{item.trackCount}}首</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </div>
</template>

<script>
    import {getLogout,getUserDetail,getUserPlaylist} from '../api/my'
    export default {
        data() {
            return {
                lists:[],
                UserPlaylist:[],
            }
        },
        methods: {
            // 跳转基本信息
            gotomessage(){
                this.$router.push('/my/message')
            },
            // 跳转歌单详情
            gotorankinglist(id){
                this.$router.push({
                    path:'/ranking/rankList',
                    query:{id}
                }) 
            },
            // 退出登陆
            logout(){
                getLogout().then(data=>{
                    if(data.code == 200){
                        window.localStorage.removeItem('uid')
                        window.localStorage.removeItem('token')
                        window.localStorage.removeItem('login')
                        this.$router.push('/recommend')
                    }
                })
            }
        },
        created(){
            let id = window.localStorage.getItem('uid')
            // getLoginStatus().then(data=>{
            //     console.log(data);
            // }),
            // getUserAccount().then(data=>{
            //     console.log(data);
            // }),
            // 获取用户信息
            getUserDetail({uid:id}).then(data=>{
                if(data.code == 200){
                    // console.log(data.profile);
                    this.lists = data.profile;
                    // console.log(this.lists.nickname);
                }
            })
            // 获取歌单信息
            getUserPlaylist({uid:id}).then(data=>{
                this.UserPlaylist = data.playlist
            })
        }
    }
</script>

<style lang="less">
.my-box{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    overflow-y:scroll;
    min-width: 320px;
    max-width: 750px;
    margin:auto;
    z-index: 1500;
    background-color: white;
    .my-top{
        position: relative;
        width: 100%;
        height: 300px; 
        background-color: rgb(179, 178, 178);
        // background-image: url(../images/banner01.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        .header-icon{
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .icon{
                display: inline-block;
                width: 45px;
                height: 50px;
                text-align: center;
                line-height: 50px;
                font-size: 20px;
                color: #f2f2f3;
            }
            .words{
                display: inline-block;
                font-size: 14px;
                color: #f2f2f3;
                height: 20px;
                width: 6em;
                text-align: center;
                line-height: 20px;
                border-radius: 10px;
                margin-right: 10px;
                border: 1px solid #f2f2f3;
            }
        }
        .user-img{
            width: 90px;
            height: 90px;
            margin: 0 auto;
            border-radius: 50%;
            background-color: #aaa;
            position: relative;
            img{
                width: 100%;
                border-radius: 50%;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
        }
        .name{
            margin:10px 0;
            text-align: center;
            span:nth-child(1){
                font-size: 16px;
                color: #333;
            }
            .nan{
                color: #0091ff;
            }
            .nv{
                color: #ff4d94;
                display: none;
            }
        }
        .user-data{
            margin: 20px auto;
            padding: 5px 20px;
            font-size: 15px;
            height: 15px;
            line-height: 15px;
            border-radius: 13px;
            color: #f2f2f3;
            width: 4em;
            border: 1px solid #f2f2f3;
        }
        .PersonalSignature{
            text-align: center;
            font-size: 14px;
            color: #666;
        }
        .bottom{
            width: 100%;
            height:50px ;
            position: absolute;
            bottom: 0;
            ul{
                display: flex;
                justify-content: space-around;
                align-items: center;
                width: 100%;
                height: 50px;
                li{
                    color: #f2f2f3;
                    text-align: center;
                    font-size: 14px;
                    .num{
                        width: 4em;
                    }
                }
            }
        }
    }
    .my-bottom{
        width: 100%;
        .top{
            width: 100%;
            ul{
                width: 100%;
                display: flex;
                li{
                    width: 50%;
                    text-align: center;
                    font-size: 15px;
                    color: #333;
                    padding: 12px 0 14px;
                    a{
                        padding: 12px 0;
                    }
                    .active{
                        color: #a6876b;
                        border-bottom: 4px solid #a6876b;
                    }
                }
            }
        }
        .bottom{
            width: 100%;
            ul{
                width: 100%;
                li{
                    width: 100%;
                    display: flex;
                    padding: 10px 0;
                    border-bottom:1px solid #ccc ;
                    .img{
                        width: 70px;
                        height: 70px;
                        background-color: #ff8d8b;
                        border-radius: 5px;
                        position: relative;
                        margin-left: 18px;
                        img{
                            width: 100%;
                            position: absolute;
                            top: 0;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            margin: auto;
                        }
                    }
                    .word{
                        width: 230px;
                        margin-left: 10px;
                        margin-top: 15px;
                        .name{
                            font-size: 15px;
                            color: #333;
                        }
                        .num{
                            font-size: 12px;
                            color: #aaa;
                        }
                    }
                }
            }
        }
    }
}
</style>